@sideWidth: 256px;
@appBarHeight: 50px;
.contenHeight() {
    min-height: -moz-calc(~"100% - @{appBarHeight}");
    min-height: -webkit-calc(~"100% - @{appBarHeight}");
    min-height: calc(~"100% - @{appBarHeight}");
}

.main-header {
    width: 100%;
    height: @appBarHeight;
}

.appBar {
    width: 100%;
    height: @appBarHeight;
    line-height: @appBarHeight;
    background-color: #20A0FF;
    color: #fff;
    .left,
    .appbar-title {
        float: left;
    }
    .right {
        float: right;
    }
    .navBtn {
        float: left;
        height: @appBarHeight;
        background-color: #20A0FF;
        border-color: #20A0FF;
        border-radius: 0px;
        &:hover {
            background-color: #1D8CE0;
            border-color: #1D8CE0;
        }
    }
}

.brandDiv {
    float: left;
    width: @sideWidth;
    _margin-right: -3px;
    background-color: #1D8CE0;
    text-align: center;
    overflow: hidden;
}

.brand {
    height: @appBarHeight;
    font-size: 20px;
    line-height: @appBarHeight;
    font-weight: 300;
    width: @sideWidth;
    box-sizing: border-box;
    display: block;
    color: #fff;
    text-decoration: none;
}

.sidebarOpen {
    margin-left: @sideWidth;
}

.sidebarClose {
    margin-left: 0px;
}

.main-sidebar {
    width: @sideWidth;
    z-index: 200;
    overflow: auto;
    background-color: #1F2D3D;
    box-sizing: border-box;
    position: fixed;
    _margin-right: -3px;
    .contenHeight();
}

.wrapper {
    width: 100%;
    overflow: hidden;
}

.content-wrapper {
    .contenHeight();
    padding: 10px;
    overflow: hidden;
    .container-fluid {
        overflow: auto;
    }
}
